<template>
  <d2-container>
    <div slot="header">
      <!-- 搜索框 -->
      <!-- <el-input
        v-model="input"
        placeholder="请输入考核编号"
        class="inputBox"
      ></el-input> -->
      <!-- 选择器 -->
      <el-button type="primary" @click="queryInspect()">搜索</el-button>
      <el-select
        v-model="value"
        clearable
        placeholder="请选择"
        class="selector"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- <el-button type="success" @click="addTemplate()" round>搜索</el-button> -->

      <!-- 搜索框 -->
    </div>

    <!--新增模态框-->
    <el-dialog
      :title="title1"
      width="30%"
      :visible.sync="dialogAddgsVisible1"
      @close="closeDialogAddgsVisible"
      :modal-append-to-body="false"
    >
      <el-form :model="inspectList" ref="addInspectList" label-width="100px">
        <el-form-item label="选择模板">
          <el-select
            v-model="template1"
            placeholder="请选择模板"
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="dict in templateData"
              :key="dict.id"
              :label="dict.templateName"
              :value="dict.id"
            /> </el-select
        ></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddgsVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="saveInspectList()">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改模态框-->
    <el-dialog
      :title="title2"
      width="30%"
      :visible.sync="dialogAddgsVisible2"
      @close="closeDialogAddgsVisible2"
      :modal-append-to-body="false"
    >
      <el-form :model="inspectList" ref="updateInspectList" label-width="100px">
        <el-form-item label="修改模板">
          <el-select
            v-model="template2"
            placeholder="请选择模板"
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="dict in templateData"
              :key="dict.id"
              :label="dict.templateName"
              :value="dict.id"
            /> </el-select
        ></el-form-item>
        <el-form-item label="修改状态">
          <el-select
            v-model="value2"
            placeholder="请选择状态"
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="dict in options"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            /> </el-select
        ></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddgsVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updateInspectList()">确 定</el-button>
      </span>
    </el-dialog>
    <!--评分模态框-->
    <el-dialog
      width="80%"
      :visible.sync="dialogAddgsVisible3"
      @close="closeDialogAddgsVisible3"
      :modal-append-to-body="false"
    >
      <el-form
        :model="scoreTableData"
        ref="scoreInspectList"
        label-width="100px"
      >
        <el-descriptions title="考核列表评分">
          <el-descriptions-item label="考核单号">{{
            scoreTableData.appraisalNo
          }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{
            scoreTableData.creator.name
          }}</el-descriptions-item>
          <el-descriptions-item label="打分类型">逐一打分</el-descriptions-item>
          <el-descriptions-item label="考核模板">{{
            scoreTableData.template.templateName
          }}</el-descriptions-item>
          <el-descriptions-item label="考核类型">公司考核</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            scoreTableData.date
          }}</el-descriptions-item>
          <el-descriptions-item label="分值">100分制</el-descriptions-item>
          <el-descriptions-item label="被考核部门">
            <div v-for="(item, index) in scoreTableData2" :key="index">
              {{ item.name }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <el-table
          ref="multipleTable2"
          :data="scoreTableData3"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange2"
        >
        <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="ifpaName"
            label="考核项"
            width="180"
          >
          <div slot-scope="scope">{{ scope.row.ifpaName }}</div>
          </el-table-column>
          <el-table-column prop="targetedValue" label="指标值">
            <div slot-scope="scope">{{ scope.row.targetedValue }}</div>
          </el-table-column>
          <el-table-column prop="weight" label="权重">
            <div slot-scope="scope">{{ scope.row.weight }}</div>
          </el-table-column>
          <el-table-column prop="score" label="评分">
            <div slot-scope="scope"><input type="text" v-model="scope.row.score"/></div>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddgsVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="scoreInspectList()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 按钮 -->
    <div>
      <el-button type="success" @click="addInspect()" round>新增</el-button>

      <!-- table -->
      <el-table
        ref="multipleTable"
        :data="tableData1"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="appraisalNo" label="考核单号" width="300">
          <div slot-scope="scope">{{ scope.row.appraisalNo }}</div>
        </el-table-column>
        <el-table-column prop="templateName" label="考核模板" width="100">
          <div slot-scope="scope">{{ scope.row.template.templateName }}</div>
        </el-table-column>
        <el-table-column prop="ifpaName" label="考核计划" width="200">
          <div slot-scope="scope">
            <div v-for="(item, index) in scope.row.assessItem" :key="index">
              <span
                v-for="(inter, interIndx) in item.ifpaName"
                :key="interIndx"
                >{{ inter }}</span
              >
            </div>
          </div>
        </el-table-column>
        <el-table-column prop="deptName" label="被考核部门" width="200">
          <div slot-scope="scope">
            <div v-for="(item2, index2) in scope.row.dept" :key="index2">
              <span
                v-for="(inter2, interIndx2) in item2.name"
                :key="interIndx2"
                >{{ inter2 }}</span
              >
            </div>
          </div>
        </el-table-column>
        <el-table-column prop="creator" label="创建人" width="80">
          <div slot-scope="scope">{{ scope.row.creator.name }}</div>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          show-overflow-tooltip
        >
          <div slot-scope="scope">{{ scope.row.date }}</div>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <div slot-scope="scope">{{ scope.row.status }}</div>
        </el-table-column>
        <el-table-column label="操作">
          <div slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >评分</el-button
            >
          </div>
        </el-table-column>
        <!-- <el-table-column prop="operition" label="操作" show-overflow-tooltip>
        </el-table-column> -->
      </el-table>
      <!-- <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div> -->

      <!-- 分页 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tablePages.currentPage"
          :page-size="tablePages.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tablePages.total"
        >
        </el-pagination>
      </div>
      <!-- <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination> -->
    </div></d2-container
  >
</template>

<script>
// export default {
//   name: 'page1'
// }
//
</script>

<style>
.block {
  float: right;
}

.inputBox {
  width: 25%;
}

.botton_souch {
  margin-left: 2%;
}

.selector {
  margin-left: 5%;
}
</style>

// 组件js
<script>
import qs from "qs";
import util from "@/libs/util";
export default {
  data() {
    return {
      //搜索框
      input: "",

      // 选择器
      options: [
        {
          value: "待审核",
          label: "待审核",
        },
        {
          value: "已审核",
          label: "已审核",
        },
      ],
      value: "",
      value2: "",

      // table
      tableData1: [],
      scoreTableData: {
        id: "",
        assessItem: "",
        status: "",
        appraisalNumber: "",
        creator: "",
        createTime: "",
        template: "",
        dept: "",
        scoreStatus: "",
      },
      scoreTableData2: [],
      scoreTableData3: [],
      multipleSelection: [],
      multipleSelection2: [],
      tablePages: {
        // 当前页数
        currentPage: 1,
        // 每页条数
        limit: 10,
        // 列表总数
        total: 0,
      },
      title1: "",
      title2: "",
      dialogAddgsVisible1: false,
      dialogAddgsVisible2: false,
      dialogAddgsVisible3: false,
      inspectList: {
        id: "",
        status: "",
        templateId: "",
      },
      score: {},
      template1: "",
      template2: "",
      templateData: [],
    };
  },

  //分页
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  methods: {
    handleSelectionChange2(val) {
      console.log("val2",val)
      console.log("score",this.score)
      this.multipleSelection2 = val;
      console.log("multiple2",this.multipleSelection2)
    },
    /**
     * 页码发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} currentPage 切换后的当前页码
     */
    handleCurrentChange(currentPage) {
      this.tablePages.currentPage = currentPage;
      this.queryInspect();
    },
    /**
     * 页数发生改变时触发的事件
     * @date 2021-12-16
     * @param {any} limit 切换后的每页条数
     */
    handleSizeChange(limit) {
      this.tablePages.limit = limit;
      this.queryInspect();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    queryInspect() {
      this.$request({
        url: "inspectList/findAllInspectList",
        method: "post",
        data: {
          currentPage: this.tablePages.currentPage,
          limit: this.tablePages.limit,
          status: this.value,
        },
      })
        .then((res) => {
          console.log("后端列表数据2", res);
          this.tableData1 = [];
          const data2 = res.list;
          for (let v = 0; v < data2.length; v++) {
            this.tableData1.push({
              id: data2[v].id,
              assessItem: data2[v].assessItem,
              status: data2[v].status,
              appraisalNo: data2[v].appraisalNumber,
              creator: data2[v].creator,
              date: data2[v].createTime,
              template: data2[v].template,
              dept: data2[v].dept,
              scoreStatus: data2[v].scoreStatus,
            });
          }
          console.log("tabalData2:", this.tableData1);
        })
        .catch((err) => {});
    },
    closeDialogAddgsVisible() {
      this.$refs.addInspectList.resetFields();
      this.template1 = "";
      this.title1 = ""; // 初始化title的值
    },
    closeDialogAddgsVisible2() {
      this.$refs.updateInspectList.resetFields();
      this.template2 = "";
      this.value2 = "";
      this.title2 = ""; // 初始化title的值
    },
    closeDialogAddgsVisible3() {
      this.scoreTableData2 = [];
      this.scoreTableData3 = [];
      this.multipleSelection2 = [];
    },
    addInspect() {
      this.dialogAddgsVisible1 = true;
      this.title1 = "新增考核列表";
    },
    saveInspectList() {
      const token = util.cookies.get("token") + "";
      this.$request({
        url: "inspectList/addInspectList",
        method: "post",
        data: qs.stringify({
          templateId: this.template1,
          creatorId: this.$store.state.d2admin.user.info.id,
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Authorization: token,
        },
      })
        .then((res) => {
          console.log("新增考核列表数据", res);
          this.template1 = "";
          this.dialogAddgsVisible1 = false;
          this.tablePages.currentPage = 1;
          this.queryInspect();
        })
        .catch((err) => {});
    },
    updateInspectList() {
      const token2 = util.cookies.get("token") + "";
      this.$request({
        url: "inspectList/updateInspectList",
        method: "post",
        data: qs.stringify({
          id: this.inspectList.id,
          templateId: this.template2,
          status: this.value2,
          updateId: this.$store.state.d2admin.user.info.id,
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Authorization: token2,
        },
      })
        .then((res) => {
          console.log("修改考核列表数据", res);
          this.template2 = "";
          this.value2 = "";
          this.title2 = ""; // 初始化title的值
          this.dialogAddgsVisible2 = false;
          this.queryInspect();
        })
        .catch((err) => {});
    },
    scoreInspectList() {
      const token3 = util.cookies.get('token') + ''
      this.$request({
        url: "companyInspectScoring/score",
        method: "post",
        data: {
          companyInspectList: this.scoreTableData,
          dept: this.scoreTableData2,
          assessItem: this.multipleSelection2,
        },
        headers: { 'Content-Type': 'application/json','Authorization': token3 }
      })
        .then((res) => {
          console.log("评分数据", res);
          this.scoreTableData2 = [];
          this.scoreTableData3 = [];
          this.multipleSelection2 = [];
          this.dialogAddgsVisible3 = false;
          this.queryInspect();
        })
        .catch((err) => {});
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogAddgsVisible2 = true;
      this.title2 = "修改考核列表";
      // this.Template.tempName = row.templateName
      this.inspectList.id = row.id;
      this.inspectList.status = row.status;
      this.inspectList.templateId = row.template.templateName;
    },
    handleDelete(index, row) {
      console.log(index, row);
      if (row.scoreStatus == "待评分") {
        this.dialogAddgsVisible3 = true;
        this.scoreTableData.id = row.id;
        this.scoreTableData.status = row.status;
        this.scoreTableData.appraisalNumber = row.appraisalNo;
        this.scoreTableData.creator = row.creator;
        this.scoreTableData.createTime = row.date;
        this.scoreTableData.template = row.template;
        this.scoreTableData.scoreStatus = row.scoreStatus;
        this.scoreTableData.dept = row.dept;
        this.scoreTableData.assessItem = row.assessItem;
        for (let v = 0; v < row.dept.length; v++) {
          this.scoreTableData2.push({
            id: row.dept[v].id,
            name: row.dept[v].name,
          });
        }
        for (let k = 0; k < row.assessItem.length; k++) {
          this.scoreTableData3.push({
            id: row.assessItem[k].id,
            score: row.assessItem[k].score,
            ifpaName: row.assessItem[k].ifpaName,
            targetedValue: row.assessItem[k].targetedValue,
            weight: row.assessItem[k].weight,
          });
        }
        console.log("评分部门", this.scoreTableData2);
        console.log("评分考核项", this.scoreTableData3);
      } else {
        const h = this.$createElement;
        this.$message({
          message: h("p", null, [
            h("span", null, "此条考核列表"),
            h("i", { style: "color: teal" }, "已被评分过了哦! "),
          ]),
        });
      }
    },
  },
  mounted() {
    this.$request({
      url: "inspectList/findAllInspectList",
      method: "post",
      data: {
        currentPage: this.tablePages.currentPage,
        limit: this.tablePages.limit,
      },
    })
      .then((res) => {
        // 给表格总数赋值
        this.tablePages.total = res.total;
        console.log("后端列表数据", res);
        const data1 = res.list;
        for (let v = 0; v < data1.length; v++) {
          this.tableData1.push({
            id: data1[v].id,
            assessItem: data1[v].assessItem,
            status: data1[v].status,
            appraisalNo: data1[v].appraisalNumber,
            creator: data1[v].creator,
            date: data1[v].createTime,
            template: data1[v].template,
            dept: data1[v].dept,
            scoreStatus: data1[v].scoreStatus,
          });
        }
        console.log("tableData1:", this.tableData1);
      })
      .catch((err) => {});
    this.$request({
      url: "companyTemplate/findTemplates",
      method: "post",
    })
      .then((res) => {
        console.log("后端模板数据", res);
        const data3 = res;
        for (let v = 0; v < data3.length; v++) {
          this.templateData.push({
            id: data3[v].id,
            templateName: data3[v].templateName,
          });
        }
        console.log("templateData:", this.templateData);
      })
      .catch((err) => {});
  },
};
</script>
